<template>
  <div>
    <!-- <login-logo /> -->
    <div class="signUp">
      <div class="signUp-head">
        <span>用户注册</span>
      </div>
      <el-form
        ref="signForm"
        :model="registerForm"
        label-width="70px"
        class="demo-ruleForm"
        :rules="rules"
        size=""
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            v-model="registerForm.username"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" size="">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-radio-group v-model="registerForm.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="phone" label="手机">
          <el-input v-model="registerForm.phone" placeholder="手机"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="registerForm.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="birth" label="生日">
          <el-date-picker
            v-model="registerForm.birth"
            value-format="YYYY-MM-DD"
            format="YYYY/MM/DD"
            placeholder="请选择生日"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="introduction" label="介绍">
          <el-input
            v-model="registerForm.introduction"
            placeholder="介绍"
          ></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button
            size=""
            style="width: 100px; margin-left: 50px; border-radius: 5px"
            @click="goBack(-1)"
            >取消</el-button
          >
          <el-button
            type="primary"
            size=""
            style="width: 100px; margin-right: 50px; border-radius: 5px"
            @click="signUp(signForm)"
            >确定</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import loginLogo from '@/components/LoginLogo.vue';
  import { ref, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { FormInstance } from 'element-plus';
  import { useRouter } from 'vue-router';
  import { register } from '@/api';

  const router = useRouter();
  const signForm = ref<FormInstance>();

  const registerForm = reactive({
    username: '',
    password: '',
    confirmPassword: '',
    sex: 0,
    phone: '',
    email: '',
    birth: '',
    introduction: '',
  });

  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (value !== registerForm.password) {
            callback(new Error('两次输入密码不一致'));
          } else {
            callback();
          }
        },
        trigger: 'blur',
      },
    ],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
    email: [
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
    ],
    birth: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  };

  const signUp = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;

    await formEl.validate(async (valid) => {
      if (valid) {
        try {
          const res = await register({
            username: registerForm.username,
            password: registerForm.password,
            sex: registerForm.sex,
            phone: registerForm.phone,
            email: registerForm.email,
            birth: registerForm.birth,
            introduction: registerForm.introduction,
          });

          if (res.code === 200) {
            ElMessage.success('注册成功');
            router.push('/login');
          }
        } catch (error) {
          console.error('注册失败:', error);
        }
      }
    });
  };

  const goBack = () => {
    router.push('/login');
  };
</script>

<style lang="less" scoped>
  @import '@/assets/css/sign-up.less';
</style>
